import { defineComponent, ref, type PropType } from "vue"
import buttonLess from './index.module.less'

export default defineComponent({
  props: {
    width: {
      type: Number,
      require: false,
      default: 98
    },
    height: {
      type: Number,
      require: false,
      default: 48
    },
    color: {
      type: String,
      require: false,
      default: 'rgb(22, 162, 184)'
    },
    size: {
      type: Number,
      require: false,
      default: 16
    },
    plain: {
      type: Boolean,
      require: false,
      default: false
    },
    onClick: {
      type: Function as PropType<() => void>,
      require: false,
      default: () => {}
    }
  },
  setup (props, { slots }) {
    const isClickActive = ref(false)

    const shadowWidth = ref(0)

    const shadowHeight = ref(0)

    const shadowOpacity = ref(0.4)

    const shadowTransition = ref('all 0.6s')

    const clickButtonHandler = () => {
      if (isClickActive.value) return
      isClickActive.value = true
      // 播放动画
      setTimeout(() => {
        shadowWidth.value = props.width * 1.5
        shadowHeight.value = props.width * 1.5
        shadowOpacity.value = 0.4
      }, 0)

      // 动画完成后
      setTimeout(() => {
        shadowOpacity.value = 0
      }, 600)

      setTimeout(() => {
        shadowTransition.value = 'none'
        shadowWidth.value = 0
        shadowHeight.value = 0
        shadowOpacity.value = 0.4
      }, 750)

      // 防止显示还原动画
      setTimeout(() => {
        isClickActive.value = false
        shadowTransition.value = 'all 0.6s'
      }, 900)
    }
    
    return () => (
      <div onClick={ () => { clickButtonHandler();props.onClick() } } class={ buttonLess.yq_button }
      style={{
          width: props.width + 'px',
          height: props.height + 'px',
          backgroundColor: props.plain ? '#fff' : props.color,
          border: props.plain ? '1px solid ' + props.color : '1px solid #fff',
          color: props.plain ? props.color : "#fff",
          fontSize: props.size + 'px'
        }}>
        { slots.default ? slots.default() : null }
        <div class={ buttonLess.yq_button_decoration1 } style={{ 
          backgroundColor: props.color,
          width: shadowWidth.value + 'px',
          height: shadowHeight.value + 'px',
          opacity: shadowOpacity.value,
          filter: 'brightness(125%)',
          transition: shadowTransition.value
         }}></div>
      </div>
    )
  }
})